<!--
 * @Descripttion: 生产工单表单
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-19 19:58:37
-->
<template>
  <DileDrawer
    v-model="productOrderForm.visible"
    :loading="productOrderForm.loading"
    size="60%"
    @sure="hanldeSure"
  >
    <template #header>
      <span>{{
        $t(`table.btnArr.${!productOrderForm.formData.id ? "add" : "edit"}`)
      }}</span>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="productOrderForm.formData"
        :rules="formRules"
        label-width="7rem"
        size="large"
        status-icon
      >
        <el-col :span="12">
          <el-form-item
            :label="$t('page.productOrderManageArr.productOrderArr.code')"
            prop="code"
          >
            <el-input
              v-model="productOrderForm.formData.code"
              :placeholder="
                $t('common.enter') +
                $t('page.productOrderManageArr.productOrderArr.code')
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="
              $t('page.productOrderManageArr.productOrderArr.orderPriority')
            "
          >
            <el-select
              v-model="productOrderForm.formData.orderPriority"
              :placeholder="
                $t('common.select') +
                $t('page.productOrderManageArr.productOrderArr.orderPriority')
              "
            >
              <el-option
                v-for="orderPriority in Object.keys(orderPriorityEnum)"
                :key="orderPriority"
                :label="
                  $t(
                    `page.productOrderManageArr.productOrderArr.orderPriorityArr.${orderPriority}`
                  )
                "
                :value="orderPriority"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.productOrderManageArr.productOrderArr.customer')"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="productOrderForm.formData.customerId"
              :selectType="selectTypeEnum.customer"
              :cacheLabel="productOrderForm.formData.extJson.customerName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.productOrderManageArr.productOrderArr.orderCode')"
          >
            <el-input
              v-model="productOrderForm.formData.orderCode"
              :placeholder="
                $t('common.enter') +
                $t('page.productOrderManageArr.productOrderArr.orderCode')
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.systemManageArr.productArr.name')">
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="productOrderForm.formData.productId"
              :selectType="selectTypeEnum.product"
              :cacheLabel="productOrderForm.formData.relProduct.name"
              @itemSelected="handleProductSelected"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.systemManageArr.productArr.code')">
            <el-input
              v-model="productOrderForm.formData.relProduct.code"
              disabled
              :placeholder="$t('common.systemAutoBringOut')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.systemManageArr.productArr.type')">
            <el-input
              v-model="productOrderForm.formData.relProduct.type"
              disabled
              :placeholder="$t('common.systemAutoBringOut')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.productOrderManageArr.productOrderArr.taskNum')"
          >
            <el-input-number
              v-model="productOrderForm.formData.taskNum"
              controls-position="right"
              :min="0"
              :placeholder="
                $t('common.enter') +
                $t('page.productOrderManageArr.productOrderArr.taskNum')
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="
              $t('page.productOrderManageArr.productOrderArr.deliveryDate')
            "
          >
            <el-date-picker
              v-model="productOrderForm.formData.deliveryDate"
              type="date"
              :placeholder="
                $t('common.select') +
                $t('page.productOrderManageArr.productOrderArr.deliveryDate')
              "
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.equipUpkeepArr.upkeepPlanArr.startDate')"
          >
            <el-date-picker
              v-model="productOrderForm.formData.startDate"
              type="datetime"
              :placeholder="
                $t('common.select') +
                $t('page.equipUpkeepArr.upkeepPlanArr.startDate')
              "
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="
                (time:any) => dayjs(time).isAfter(productOrderForm.formData.endDate)
                "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.equipUpkeepArr.upkeepPlanArr.endDate')"
          >
            <el-date-picker
              v-model="productOrderForm.formData.endDate"
              type="datetime"
              :placeholder="
                $t('common.select') +
                $t('page.equipUpkeepArr.upkeepPlanArr.endDate')
              "
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="
              (time:any) => dayjs(time).isBefore(productOrderForm.formData.startDate)
            "
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('common.remark')">
            <el-input
              v-model="productOrderForm.formData.remark"
              :rows="5"
              :placeholder="$t('common.enter') + $t('common.remark')"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </template>
  </DileDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, nextTick } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { ElNotification, dayjs } from "element-plus";
import { orderPriorityEnum } from "@/utils/typings/productOrderManage/index.type";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
import DileDrawer from "@/components/dile-drawer/index.vue";
import Dile_APi from "@/api";
import Dile_Methods from "@/utils/methods";

const emit = defineEmits(["refresh"]);

let { t } = useI18n();
/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => {
  return {
    id: 0,
    status: true, //状态
    code: "", //生产工单号
    name: "", //模具名称
    orderPriority: "", //工单优先级
    customerId: null, //订单客户
    orderCode: "", //生产订单编号
    //产品信息
    productId: null,
    relProduct: {
      code: "",
      name: "",
      type: "",
    },
    taskNum: 0, //任务数量
    deliveryDate: "", //交货日期
    startDate: "", //计划开始时间
    endDate: "", //计划结束时间
    remark: "", //备注
    extJson: {
      customerName: "", //订单客户名称
    },
  };
};
/**
 * @Author: xzh
 * @Descripttion: 生产工单表单参数
 * @Param:
 */
let productOrderForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
});

/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    code: [
      {
        required: true,
        message:
          t("common.enter") +
          t("page.productOrderManageArr.productOrderArr.code"),
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 生产工单主键
 */
let init = async (id: number) => {
  let { visible, loading } = toRefs(productOrderForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单数据
    await initFormData(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let data: object_Inf = !!id
    ? await Dile_APi.getMoldArchivesInfo(id)
    : defaultData();
  Object.assign(productOrderForm.formData, data);
};

/**
 * @Author: xzh
 * @Descripttion: 仓库选择
 * @Param:
 * @param {*} dataArr
 */
let handleProductSelected = (dataArr: Array<object_Inf>) => {
  let product: object_Inf = dataArr.find(() => true) || {},
    { id } = product || {};

  Object.assign(productOrderForm.formData, {
    productId: id,
    relProduct: product,
  });
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let { formData, loading, visible } = toRefs(productOrderForm),
    valid = await formRef.value.validate();
  if (!valid || !!loading.value) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveMoldArchives(formData.value);
    //触发刷新回调
    emit("refresh");
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
    //关闭弹框
    visible.value = false;
  } finally {
    loading.value = false;
  }
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped></style>
